<template>
  <div class="new-list w1160">
    <ul class="flex">
        <li class="flex fd_c" v-for="item in newList" :key="item._id">
            <router-link :to="`/detail/${item._id}`">
                <img :src="item.cover" width=370px; height="220px">
                <p class="title fz16 text-center">{{ item.title }}</p>
                <p class="time fz14 text-center">{{ item.updatedAt }}</p>
            </router-link>
        </li>
    </ul>
    <div class="pagination flex">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pagination.pageNumber"
            :page-sizes="[1, 2, 3]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
        </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewsList',
  data () {
    return {
      pagination: {
        total: 0,
        pageSize: 2,
        pageNumber: 1
      },
      newList: []
    }
  },
  watch: {
    $route (to) {
      // 当路由变化时，更新当前页码和每页显示的数据量
      const { pageNumber, pageSize } = this.pagination

      this.pagination.pageNumber = parseInt(to.query.pageNumber) || pageNumber
      this.pagination.pageSize = parseInt(to.query.pageSize) || pageSize
      this.getNewsList(this.pagination.pageNumber, this.pagination.pageSize)
    }
  },
  methods: {
    // 请求新闻列表
    async getNewsList (pageNumber, pageSize) {
      const { data, pagination } = await this.$req('/newslist', 'get', {
        pageSize: pageSize || this.pagination.pageSize,
        pageNumber: pageNumber || this.pagination.pageNumber
      })
      this.newList = data
      this.pagination = pagination
    },
    // 切换分页
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.$router.push({ path: '/news', query: { pageNumber: this.pagination.pageNumber, pageSize: val } })
    },
    // 切换页码
    handleCurrentChange (val) {
      this.pagination.pageNumber = val
      this.$router.push({ path: '/news', query: { pageNumber: val, pageSize: this.pagination.pageSize } })
    }
  },
  created () {
    const { pageNumber: pageNumberInit, pageSize: pageSizeInit } = this.pagination
    const { pageNumber = pageNumberInit, pageSize = pageSizeInit } = this.$route.query
    this.pagination.pageNumber = parseInt(pageNumber)
    this.pagination.pageSize = parseInt(pageSize)
    this.getNewsList(this.pagination.pageNumber, this.pagination.pageSize)
  }
}
</script>

<style lang="scss" scoped>
.new-list {
    ul {
        padding: 80px 0 90px;
        :nth-child(2) {
            margin-right: 20px;
        }
    }
    li {
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .title {
            padding-top: 20px;
        }
        .time {
            padding: 30px 0;
            color: #666;
        }
        a {
          color: #333;
          &:hover {
            color: #409eff;
          }
        }
    }
    // li:first-child {
    //   .title {
    //     padding
    //   }
    // }
    .pagination {
        justify-content: center;
        padding: 0 0 50px;
        :deep(.el-pagination.is-background .el-pager li) {
          border-radius: 50%;
          font-size: 16px;
          &:hover {
            background-color: #409eff;
            color: white;
          }
        }
    }
}
</style>
